<template>
  <div class="account">
    <div class="">
      <el-form :inline="true">
        <el-form-item label="">
          <el-input v-model="account" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="add" v-permission="['管理者']">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="id"
        label="序号"
      />
      <el-table-column
        prop="account"
        label="账号"
      />
      <el-table-column
        prop="user_name"
        label="用户"
      />
      <el-table-column
        prop="role_name"
        label="角色"
      />
      <el-table-column
        prop="status_str"
        label="状态"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" v-if="scope.row.status_str == '禁用'" @click="enableFn(scope.row)">启用</el-button>
          <el-button type="text" size="small" v-else @click="enableFn(scope.row)">禁用</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)" v-permission="['管理者']">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      @size-change="handleSizeChange"
      @current-change="handleSizeChange"
      :page-size="10"
      layout="total, prev, pager, next, jumper"
      :total="total"
    />

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="form-line">
        <div class="form-item-required">*</div>
        <el-input v-model="ruleForm.account" placeholder="请输入账号" />
      </div>
      <div class="form-line">
        <div class="form-item-required">*</div>
        <el-input v-model="ruleForm.password" show-password placeholder="请输入密码" />
      </div>
      <div class="form-line">
        <div class="form-item-required">*</div>
        <el-input v-model="ruleForm.user_name" placeholder="请输入用户" />
      </div>
      <div class="form-line">
        <div class="form-item-required">*</div>
        <el-select v-model="ruleForm.role_id" clearable  placeholder="请选择角色">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.role_name"
            :value="item.id"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryUser, getUser, createOrUpdateUser, chooseRole, enable } from '@/api/system'
export default {
  data() {
    return {
      account: '',
      tableData: [],
      currentPage: 1,
      total: 0,
      dialogVisible: false,

      ruleForm: {
        account: null,
        password: null,
        role_id: null,
        status: null,
        user_id: null,
        user_name: null
      },
      roles: [],

      option: null,
      title: '新增',
      options: [{
        title: '选择区域',
        list: [{ name: '1' }]
      }, {
        title: '选择部位',
        list: [{ name: '1' }]
      }, {
        title: '选择用途',
        list: [{ name: '1' }]
      }]
    }
  },
  methods: {
    async role() {
      const res = await chooseRole({})
      if (res.code == 200 && res.data) {
        this.roles = res.data
      }
    },
    add() {
      this.dialogVisible = true
      this.title = '新增'
      for (const key in this.ruleForm) {
        if (this.ruleForm.hasOwnProperty(key)) {
          this.ruleForm[key] = null
        }
      }
    },
    edit(item) {
      this.title = '编辑账号'
      this.dialogVisible = true
      this.ruleForm = {
        account: item.account,
        password: item.password,
        role_id: null,
        status: null,
        user_id: item.id,
        user_name: item.user_name,
      }
    },
    async addConfirm() {
      const params = Object.assign(this.ruleForm)
      if (!params.account || !params.password || !params.role_id || !params.user_name) {
        this.$message.error('请完善表单')
        return
      }
      const res = await createOrUpdateUser(params)
      if (res.code == 200) {
        this.dialogVisible = false
        this.$message.success('保存成功')
        this.getList()
      }
    },
    async getList() {
      const params = {
        page_num: this.currentPage,
        conditions: [
          {
            key: "account",
            operator: "like",
            value: this.account
          }
        ],
        page_size: 10,
        order_info: {
          key: "create_time",
          order: "desc",
        },
      }
      const res = await queryUser(params);
      if (res.code == 200 && res.data) {
        this.tableData = res.data
        this.total = res.paging.total
      }
    },
    
    handleClose(done) {
      done()
    },
    async enableFn(item) {
      const params = {
        account: item.account,
        conditions: [
          {
            "key": "",
            "order": ""
          }
        ],
        create_time: "",
        id: item.id,
        order_info: {
          "key": "",
          "order": ""
        },
        page_num: 0,
        page_size: 0,
        password: "",
        status: item.status_str == '禁用' ? '1' : '0',
        token: "",
        update_time: "",
        user_name: item.user_name
      }
      const res = await enable(params)
      if (res.code == 200) {
        this.getList()
      }
    },
    handleSizeChange(val) {
      this.currentPage = val
      this.getList()
    }
  },
  mounted(){
    this.getList()
    this.role()
  }
}
</script>

<style lang="scss" scoped>
.account{
  position: relative;
  min-height: calc(100vh - 150px);
  padding-bottom: 100px;
  .el-pagination{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: - 300px;
    width: 600px;
  }
  .el-dialog{
    .el-input{
      margin-bottom: 20px;
    }
    .el-select{
      width: 100%;
    }
  }
  .form-line {
    display: flex;
    justify-self: center;
    align-items: center;
    .form-item-required {
        color: red;
        margin-right: 10px;
        font-size: 16px;
        margin-bottom: 10px;
    }
  }
}
</style>
